<template>
  <div class="box">
    <div class="top">
      <div class="topLeft">
        <dv-decoration-3 style="width: 250px; height: 30px" />
      </div>
      <div class="topMidddle">
        <dv-decoration-5 style="width: 300px; height: 40px" />
      </div>
      <div class="topRight">
        <dv-decoration-3 style="width: 250px; height: 30px" />
      </div>
    </div>
    <div class="body">
      <div class="left">
        <dv-border-box-8>
          <Line />
        </dv-border-box-8>
        <dv-border-box-8>
          <Table />
        </dv-border-box-8>
        <dv-border-box-8>
          <Bar />
        </dv-border-box-8>
      </div>
      <div class="middle">
        <div class="mTop">
          <dv-border-box-8 class="item">dv-border-box-8</dv-border-box-8>
          <dv-border-box-8 class="item">dv-border-box-8</dv-border-box-8>
          <dv-border-box-8 class="item">dv-border-box-8</dv-border-box-8>
          <dv-border-box-8 class="item">dv-border-box-8</dv-border-box-8>
        </div>
        <div class="mBody">
          <div class="item">
            <dv-border-box-8>
              <img style="width: 100%;height: 100%;" src="@/assets/center.png" alt="">
            </dv-border-box-8>
          </div>
          <div class="item">
            <dv-border-box-8>
              
            </dv-border-box-8>
          </div>
        </div>
      </div>
      <div class="right">
        <dv-border-box-8><Pie /></dv-border-box-8>
        <dv-border-box-8><Table /></dv-border-box-8>
        <dv-border-box-8>
          <Scatter />
        </dv-border-box-8>
      </div>
    </div>
  </div>
</template>

<script setup>
import Line from "./components/Line/index.vue";
import Bar from "./components/Bar/index.vue";
import Table from "./components/Table/index.vue";
import Scatter from "./components/Scatter/index.vue";
import Pie from "./components/Pie/index.vue";
</script>

<style scoped>
.box {
  width: 1920px;
  height: 1080px;
  /* background-color: #000; */
  background-image: url('@/assets/module-bg.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  color: aliceblue;
}
.top {
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.body {
  height: 1030px;
  display: flex;
}
.left {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 25%;
}
.middle {
  width: 50%;
}
.right {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 25%;
}
.mTop{
  display: flex;
  height: 10%;
  
}
.mBody{
  height: 90%;
}
.mBody .item{
  height: 50%;
}
</style>
